<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> 
<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}
	#flash{
		width: 670px;
		height: 240px;
		border: 3px solid blue;
		margin:0 auto;
		position: relative;
	}
	#flash img{
		position: absolute;
		top: 0px;
		left: 0px;
		display: none;
	}
	#flash img.cur{
		display: block;
	}
	#flash ul{
		position: absolute;
		right: 0px;
		top: 200px;
	}
	#flash ul li{
		float: left;
		list-style: none;
		width: 22px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		color: white;
		font-size: 12px;
		font-family: arial;
		background: #999999;
		margin-right: 5px;
		border-radius: 11px;
	}
	#flash ul li.cur{
		background: #E4393C;
	}
</style>
<script type="text/javascript">
window.onload = function(){

	var timer = setInterval(qiehuan,1000);//设置自动切换定时器
	var cur = 0;//定义全局变量，用来存需要展示的图片的序号
	var imgs = document.getElementById('flash').getElementsByTagName('img');//获得div里面的所有图片
	var lis = document.getElementById('flash').getElementsByTagName('li');//获得div里面的所有li标签
	function qiehuan(){
		cur++;
		if(cur==6){
			cur=0;
		}
		for(var i=0;i<imgs.length;i++){//让所有的图片都隐藏
			// imgs[i].className = '';
			imgs[i].style.display = 'none';
		}
		// imgs[cur].className = 'cur';//让对应的cur号的图片显示
		shanbai();

		for(var i=0;i<lis.length;i++){
			lis[i].className = '';
		}
		lis[cur].className = 'cur';
	}


	for(var i=0;i<lis.length;i++){
		lis[i].onmouseover = function(e){

			clearInterval(timer);//清除定时器

			var ev = window.event || e;
			var curObj = ev.srcElement || ev.target;//获得事件源对象
			for(var j=0;j<lis.length;j++){//判断鼠标移入的li是几号
				if(lis[j]==curObj){
					cur = j;
				}
			}

			for(var i=0;i<imgs.length;i++){//让所有的图片都隐藏
				// imgs[i].className = '';
				imgs[i].style.display = 'none';
			}
			// imgs[cur].className = 'cur';//让对应的cur号的图片显示
			shanbai();

			for(var i=0;i<lis.length;i++){
				lis[i].className = '';
			}
			lis[cur].className = 'cur';
		}

		lis[i].onmouseout = function(){
			timer = setInterval(qiehuan,1000);//恢复定时器
		}

	}


	function shanbai(){//用来实现闪白效果的函数
		imgs[cur].style.display = 'block';//让对应的图片变为显示状态
		imgs[cur].style.opacity = 0;
		imgs[cur].style.filter = 'alpha(opacity=0)';
		var toumingdu = 0;
		touming = setInterval(function(){//设置定时器，让透明度由透明变为不透明
			toumingdu++;
			imgs[cur].style.opacity = toumingdu/100;
			imgs[cur].style.filter = 'alpha(opacity='+toumingdu+')';
			if(toumingdu==100){
				clearInterval(touming);
			}
		},2)
	}
}
</script>
</head>

<body>

	<div id="flash">
		<img src="images/1.jpg" class="cur" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<ul>
			<li class="cur">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>


</body>
</html>

